<style lang="less">
.app-home-vue {
  .home-part-body {
    height: 350px;
    .echarts-vue {
      height: 350px;
    }

    .order-box {
      width: 100%;
      height: 400px;
      box-sizing: border-box;
      .order-count {
        width: 49%;
        height: 260px;
        float: left;
        .order-tag {
          width: 100%;
          height: 200px;
          text-align: center;
        }
        .order-title {
          width: 100%;
          height: 60px;
          line-height: 55px;
          font-size: 28px;
          text-align: center;
        }
      }
      .order-failed {
        width: 49%;
        height: 100px;
        float: left;
      }
    }
  }

  .home-part-body2 {
    height: 420px;
    .echarts-vue {
      height: 420px;
    }
  }

  .progress-div {
    > p {
      padding: 8px 0;
    }
    .h-progress {
      &-title {
        color: @dark2-color;
        font-size: 15px;
      }
      &-text {
        width: 160px;
        color: #333;
      }
    }
  }
}
</style>
<template>
  <div class="app-home-vue frame-page">
    <Row :space="24">
      <Cell :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">订单汇总</div>
            <div class="h-panel-right">
              <span class="gray-color">累计单量</span><Space /><span class="font20 primary-color">200</span><Space /><span class="gray-color"></span>
            </div>
          </div>
          <div class="h-panel-body progress-div home-part-body">
            <div class="order-box">
              <div class="order-count">
                <div class="order-tag">
                  <Tag type="circle" color="#87d068" style="width: 200px; height: 200px; text-align: center; line-height: 195px; font-size: 40px">
                    198
                  </Tag>
                </div>
                <div class="order-title"><span>已完成</span></div>
              </div>
              <div class="order-count">
                <div class="order-tag">
                  <Tag type="circle" color="yellow" style="width: 200px; height: 200px; text-align: center; line-height: 195px; font-size: 40px">
                    2
                  </Tag>
                </div>
                <div class="order-title"><span>已售后</span></div>
              </div>
            </div>
          </div>
        </div>
      </Cell>
      <Cell :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">今日订单</div>
            <div class="h-panel-right">
              <span class="gray-color">今日达成</span><Space /><span class="font20 primary-color">200</span><Space /><span class="gray-color"></span>
            </div>
          </div>
          <div class="h-panel-body progress-div home-part-body">
            <p>
              <Progress :percent="99" color="green"><template v-slot:title>待发货</template><template v-slot:text>400个</template></Progress>
            </p>
            <p>
              <Progress :percent="88" color="blue"><template v-slot:title>已发货</template><template v-slot:text>0个</template></Progress>
            </p>
            <p>
              <Progress :percent="0" color="red"><template v-slot:title>待售后</template><template v-slot:text>0个</template></Progress>
            </p>
            <p>
              <Progress :percent="0" color="blue"><template v-slot:title>已售后</template><template v-slot:text>0个</template></Progress>
            </p>
          </div>
        </div>
      </Cell>
    </Row>
  </div>
</template>
<script>
import data1 from '@components/orchard/components/datas/data1';
import data2 from '@components/orchard/components/datas/data2';
import data3 from '@components/orchard/components/datas/data4';

export default {
  data() {
    return {
      data1,
      data2,
      data3,
      type: 'type1'
    };
  },
  methods: {
    openMore() {
      this.$router.push({ name: 'Chart' });
    }
  }
};
</script>
